<template>
  <div>
    <HeaderTitle :textObj="textObj"></HeaderTitle>
    <el-form label-width="auto" class="bg-fff mt-10 p-10">
      <el-form-item required label="账号：">
        <el-input
          v-model="account"
          style="width: 240px"
          placeholder="请输入账号"
          clearable
        />
      </el-form-item>
      <el-form-item required label="用户名称:">
        <el-input
          v-model="username"
          style="width: 240px"
          placeholder="请输入用户名称"
          clearable
        />
      </el-form-item>
      <el-form-item required label="密码：">
        <el-input
          v-model="password"
          style="width: 240px"
          type="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
      <el-form-item required label="确认密码：">
        <el-input
          v-model="surePassword"
          style="width: 240px"
          type="password"
          placeholder="请确认密码:"
          show-password
        />
      </el-form-item>
      <el-form-item required label="类型：">
        <el-radio-group v-model="radio">
          <el-radio size="small" label="1">超级管理员 (所有权限)</el-radio>
          <el-radio size="small" label="2">管理员 (拥有部分权限)</el-radio>
          <el-radio size="small" label="3">观察员 (只读权限)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item required label="描述：">
        <el-input
          autosize
          v-model="desc"
          style="width: 240px"
          type="text"
          placeholder="请输入描述"
        />
      </el-form-item>

      <div style="margin-left: 160px">
        <el-button>取消</el-button>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
// 导入组件
import HeaderTitle from "../../components/HeaderTitle.vue";
import { ref, onMounted, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
import { $accountDetail, $accountEdit, $accountAdd } from "@/api/index";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
// 定义变量头部信息
let textObj = {
  title: "子账号  ",
  name: "添加子账号 ",
  dsc: " 可添加当前组织的子账号，并为其分配权限。",
};
// 输入框内容
const account = ref("");
const username = ref("");
const password = ref("");
const surePassword = ref("");
const radio = ref("");
const desc = ref("");
const route = useRoute();
const id = route.query.id; // 获取路由参数
const onSubmit = () => {
 // 验证账号是否合法
 const isValidInput = (value)=> {
    const regex = /^[a-zA-Z0-9]+$/;
    return regex.test(value);
}  
// 不能为空
  if (!account.value) {
    ElMessage({
      type: "error",
      message: "账号不能为空",
    });
    return;
  }else if (!isValidInput(account.value)) {
    ElMessage({
      type: "error",
      message: "请输入正确账号",
    });
    return;
  }
  if (!username.value) {
    ElMessage({
      message: "用户名不能为空",
    });
    return;
  }
  if (!password.value) {
    ElMessage({
      type: "error",
      message: "密码不能为空",
    });
    return;
  }else if (password.value.length < 6) {
    ElMessage({
      type: "error",
      message: "密码不能小于6位",
    });
    return;
  }else if (password.value.length > 16) {
    ElMessage({
      type: "error",
      message: "密码不能大于16位",
    });
    return;
  }else if (!isValidInput(password.value)) {
    ElMessage({
      type: "error",
      message: "请输入正确密码",
    });
    return;
  }
  if (!surePassword.value) {
    ElMessage({
      type: "error",
      message: "确认密码不能为空",
    });
    return;
  }
  if (password.value !== surePassword.value) {
    ElMessage({
      type: "error",
      message: "两次密码不一致",
    });
    return;
  }
  if (!radio.value) {
    ElMessage({
      type: "error",
      message: "请选择权限",
    });
    return;
  }
  if (!desc.value) {
    ElMessage({
      type: "error",
      message: "请输入描述",
    });
    return;
  }
  if (id) {
    editAccount();
  } else {
    addAccount();
  }
};

// 添加账号
const addAccount = async () => {
  const data = {
    account: account.value,
    username: username.value,
    password: password.value,
    surePassword: surePassword.value,
    type: radio.value,
    desc: desc.value,
  };

  let res = await $accountAdd(data);
  ElMessage({
    type: "success",
    message: "新增成功",
  });
  router.push("/account/list");
};

// 修改账号
const editAccount = async () => {
  const data = {
    id,
    account: account.value,
    username: username.value,
    password: password.value,
    surePassword: surePassword.value,
    type: radio.value,
    desc: desc.value,
  };
  if (password.value !== surePassword.value) {
    ElMessage({
      type: "error",
      message: "两次密码不一致",
    });
    return;
  }
  let res = await $accountEdit(data);
  await ElMessageBox.confirm("确定要修改这条数据吗?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  });
  ElMessage({
    type: "success",
    message: "修改成功",
  });
  router.push("/account/list");
};

// 获取账号详情

const getData = async () => {
  let res = await $accountDetail({ id });
  account.value = res.data.account;
  username.value = res.data.username;
  password.value = res.data.password;
  surePassword.value = res.data.password;
  radio.value = res.data.type;
  desc.value = res.data.desc;
};

// 监听
watchEffect(() => {
  if (route.query.id) {
    getData();
  } else {
    account.value = "";
    username.value = "";
    password.value = "";
    surePassword.value = "";
    radio.value = "";
    desc.value = "";
  }
});
onMounted(() => {
  if (id) {
    getData();
  }
});
</script>
<style scoped>
</style>